<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>流程监控</title>
</head>
<body>
<div class="container-fluid">
    <div class="row">
        <div class="col-lg-12 col-sm-12 col-xs-12">
            <div class="widget  no-padding">
                <div class="widget-header bg-themeprimary">
                    <i class="widget-icon typcn typcn-th-list"></i>
                    <span class="widget-caption" data-culture="jobList">待办</span>
                </div>
                <div class="widget-body">
                    <table id="grid-data">
                        <thead>
                        <tr>
                            <th style="text-align: center;">流程名称</th>
                            <th style="text-align: center;">业务类别</th>
                            <th style="text-align: center;">申请人</th>
                            <th style="text-align: center;">申请时间</th>
                            <th style="text-align: center;">当前环节</th>
                            <th style="text-align: center;">当前处理人</th>
                            <th style="text-align: center;">发起单位</th>
                            <th style="text-align: center;">运行状态</th>
                            <th style="width: 200px; text-align: center;">操作</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr class="row-no-display">
                            <td style="text-align: center;">$instanceName$</td>
                            <td style="text-align: center;">$templateName$</td>
                            <td style="text-align: center;">$startUserName$</td>
                            <td style="text-align: center;">$startTime$</td>
                            <td style="text-align: center;">$activityName$</td>
                            <td style="text-align: center;">$handlers$</td>
                            <td style="text-align: center;">$orgName$</td>
                            <td style="text-align: center;">$runState$</td>
                            <td class="text-left" style="text-align: center; ">
                                <a rel='terminated' class="btn btn-info btn-xs edit"><i
                                        class="fa fa-edit"></i><span>终止</span></a>
                                <a rel='suspended' render="render" class="btn btn-info btn-xs edit"><i
                                        class="fa fa-edit"></i><span>挂起</span></a>
                                <a rel='changeUser' class="btn btn-info btn-xs edit"><i
                                        class="fa fa-edit"></i><span>任务调整</span></a>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript">
    var monitorObj = {
        grid: {
            keys: ['jobName'],
            url: "/workflow/instance/find/monitor",
            placeholder: '',
            stableparm: function () {
                return {};
            },
            events: {
                render: function (row, parm, i, obj) {
                    switch (row.runState) {
                        case 0:
                            return "<i class='glyphicon glyphicon-pause'></i>挂起";
                        case 1:
                            return "<i class='glyphicon glyphicon-play'></i>启动"
                            break
                        default:
                            obj.attr("class", "btn btn-info btn-xs edit disabled");
                            return "<i class='glyphicon glyphicon-pause'></i>挂起";
                            break
                    }
                },
                suspended: function (row) {
                    bootbox.confirm("流程终止后将作废！", function () {
                        var state = Math.abs(row.runState - 1);
                        $.request('/workflow/instance/update/state', {
                            id: row.id,
                            runState: state
                        }, function (result) {
                            monitorObj.grid.ext.refresh();
                        }, false)
                    })
                },
                terminated: function (row) {
                    bootbox.confirm("流程终止后将作废！", function () {
                        $.request('/workflow/instance/update/state', {
                            id: row.id,
                            runState: 2
                        }, function (result) {
                            monitorObj.grid.ext.refresh();
                        }, false)
                    })


                }
            }

        }
    }


    function init() {
        $("#grid-data").table(monitorObj.grid);
    }
    function dispose() {
        monitorObj = {};
    }
</script>
</body>
</html>